html, body {
    position: relative;
    height: 100%;
}
body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
}
header{
    height: 100%;
    width: 100%;
}
.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}



/*                 第一页                   */
.swiper-slide{
    display: flow-root;
}
.navbar-nav{
    float: right;
}
.navbar-light .navbar-nav .nav-link.active{
    color: #ffffff;
    font-size: 14px;
    padding: 0 10px 0 13px;
}
.navbar-light .navbar-nav .nav-link{
    color: #ffffff!important;
    font-size: 14px;
}
.navbar-light .navbar-toggler{
    background: white;
}
.navbar-light .navbar-nav .nav-link.active:nth-child(5){
    padding: 0 0 0 10px;
}
.swiper-slide:nth-child(1){
    background-image: url("../img/page-3/bg2.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
header .self{
    background: rgba(51, 51, 51,.7);
  /*   position: fixed;
    width: 100%; */
}
header .bg-light{
    background: rgba(51, 51, 51, 0)!important;;
}
.navbar{
    padding: 5px 0 5px 0;
}
.swiper-container-vertical>.swiper-pagination-bullets{
    right: 65px!important;
}
.swiper-pagination-bullet-active{
    box-shadow: 0px 0px 8px #ffefef;
}
.swiper-pagination-bullet-active,.swiper-pagination-bullet{
    background: #0978b1;
    width: 11px;
    height: 11px;
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 10px 0;
}
header .corner1{
    margin-top: 150px;
}
header .corner1 .hidd ,header .corner1 .hidp{
    font-size: 50px;
    color: #0A9676;
    text-shadow: 5px -2px 8px #151414;
    font: 50px "Microsoft Yahei";
}
header .corner1 .hidd{
    margin-left: -80px;;
}
header .corner1 .hidp{
    color: #B6BF31!important;
    text-shadow: 9px -2px 15px #000!important;
    position: absolute;
    margin-top: 6px;
    margin-left: 10px;
}
header .corner1 .motto{
    font: 27px "Microsoft Yahei";
    color: #fff;
}
header .corner2 img,header .corner3 img,header .corner4 img,header .corner5 img{
    width: 5%;
}
header .corner2 img{
    position: relative;
    margin-left: 128px;
    margin-top: -220px;
    float: left;
    display: inline-block;
}
header .corner3 img{
margin-right: 136px;
margin-top: -220px;
    float: right;
}
header .corner4 img{
    margin-left: 128px;
    margin-top: 230px;
    float: left;
}
header .corner5 img{
    margin-right: 150px;
    margin-top: 230px;
    float: right;
}
header .zz{
    width: 945px;
}
 .next{
    width: 51px;
    height: 51px;
    display: inline-block;
    border-radius: 38px;
    background: rgba(0,0,0,.2);
    position: absolute;
    margin-top: 200px;
}
 /*              第二页                 */
.tup{
    background-image: url("../img/page-3/base.jpg");
    height: 100%;
    background-size: 100%;
}
.tup h1{
    font: 50px "Microsoft Yahei";
    color: #fff;
    display: inline-block;
    margin-top: 151px;
    margin-bottom: 30px;
}
.tup .card-img-top{
    width: 60%!important;
    margin: auto;
    height: 125px;
    transition: width 2s, height 2s, transform 2s;
}
.tup .card-img-top:hover{
    height: 125px;
    width: 200px!important;
}
.tup .card{
    border: none;
    background: #ffffff00;
    color: white;
}
.tup .card-body .card-text,.tr .card-body .card-text{
    font-size: 15px;
}
/*                 第三页                   */
.tr .no-gutters .card-img{
    width: 48%!important;
}
.tr .card-title{
    text-align: left;
    margin-bottom: 5px;
    font-size: 17px;
}
.tr .card-body .card-text{
    display: inline-block;
    text-align: left;
    float: left;
    padding-bottom: 12px;
}
.tr .no-gutters .col-md-1 img{
    display: block;
    float: right;
    margin-top: 21px;
}
.tr .card{
    border: none;
}
.ds{
background-image: url("../img/page-2/1(4).png");
    position: absolute;
    right: 104px;
    top: 185px;
    width: 36%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
}
.dd{
    background-image: url("../img/page-2/2(3).png");
    position: absolute;
    right: 262px;
    top: 167px;
    width: 21%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
}
.tr .sub1,.tr .sub2,.tr .sub3,.tr .sub4,.tr .sub5,.tr .sub6,.tr .sub7,.tr .sub8,.tr .sub9,.tr .sub10{
    position: absolute;
}
.tr .sub1{
    margin-top: -65px;
    margin-left: -96px;
}
.tr .sub2{
    margin-top: -38px;
    margin-left: -11px;
    font-size: 46px;
}
.tr .sub3{
    margin-top: 106px;
    margin-left: 248px;
    font-size: 35px;
}
.tr .sub4{
    margin-top: 88px;
    margin-left: 72px;
}
.tr .sub5{
    margin-top: 19px;
    margin-left: -210px;
    font-size: 28px;
}
.tr .sub6{
    margin-top: 33px;
    margin-left: 160px;
    font-size: 22px;
}
.tr .sub7{
    margin-top: 87px;
    margin-left: -371px;
    font-size: 30px;
}
.tr .sub8{
    margin-top: 9px;
    margin-left: 355px;
    font-size: 14px;
}
.tr .sub9{
    margin-top: -51px;
    margin-left: -391px;
    font-size: 37px;
}
.tr .sub10{
    margin-top: 72px;
    margin-left: -84px;
    font-size: 26px;
}
.tr .dz{
    position: relative;
}
.tr .dz img{
    width: 42%;
    margin-top: -85px;
    margin-left: 37px;
}
/*                 第四页                   */
.ty{
    background-color: rgba(255, 255, 255, 0);
    background: #417ea8;
    height: 100%;
    width: 100%;
    background-image: url("../img/page-4/cloud_three.png");
}
.ty,.ty .card-title{
    font-size: 16px;
    font-weight: bold;
}
.ty .card{
    border: none;
    background: #f9f9f900;
}
.ty .titlex:hover,.ty .titles:hover{
    transform: rotate(360deg);
    transition: width 2s, height 2s, transform 2s;
}
.ty  .hh {
    width: 120px;
    height: 116px;
    border-radius: 88px;
    margin: auto;
    border: 4px solid orangered;
    opacity: 0.7;
}
.ty .titlex,.ty .titles{
    display: block;
}
.ty .titlex{
    font: 50px "Microsoft Yahei";
    color: #fff;
    margin-top: 100px;
    display: inline-block;
}
.ty .titles{
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgba(16, 16, 16, 0.98);
    text-shadow: 1px 1px 1px red;
    font-weight: 100;
}
/*                 第五页                   */
.kl{
    background-image: url(../img/page-3/bg1.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
}
.kl .qz{
    width: 100%;
    height: 100%;
    transition: width 1s, height 1s,lincar 1s;
}
.kl .sss{
    margin: 20px 0 20px 0;
}
.kl .sss:nth-child(5),.kl .sss:nth-child(6),.kl .sss:nth-child(7),.kl .sss:nth-child(8){
    margin-top: 0;
}
.kl .card{
    margin-top: 17px;
    transition: all 0.5s ease-out;
    border: none;
}
.kl .card .ab{
    height: 260px;
    overflow: hidden;
    position: relative;
}
.kl .card:hover{
    transform: scale(1.2);
}
.kl .card .ab img{
    display: block;
    max-width: 100%;
    height: auto;
}
.kl .card .hover-text{
    position: absolute;
    text-align: center;
    margin: 0 auto;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.66);
    padding: 35% 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: all 0.5s;
}
.kl .card .ab:hover .hover-text{
    opacity: 1;
}
.kl .qz:hover{
    width: 283px;
    height: 316px;
}
.kl .card a{
    height: 316px; 
}
.kl .ab a{
    color: #ffffff;
}
.kl .ab small{
    font-size: 12px;
}
.kl .ab h4 a{
text-decoration: none;
}
/*                 第六页                   */
.ll{
    background-image: url(../img/page-3/pure.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
}
.ll .jumbotron-fluid{
    padding: 0;
    margin-bottom: 0;
    height: 100%;
    background: #efefef00;
}
.ll .display-4{
    color: white;
    font-size: 36px;
}
.ll .lead{
    font-size: 20px;
    color: white;
}
.ll .lead:nth-child(4){
    margin-bottom: 30px;
    display: inline-block;
}
.ll .top{
    background: #16BA9D;
    width: 100%;
}
.ll .foot{
    background: #16BA9D;
    width: 100%;
}
 /*                  响应式                   */
 @media (max-width:600px){
    header .zz{
        width: 76px;
    }
    header .corner2 img,header .corner3 img,header .corner4 img,header .corner5 img{
        width: 11%;
    }
    header .corner2 img,header .corner4 img{
        margin-left: 65px;
        margin-top: -292px;
    }
    header .corner3 img,header .corner5 img{
        margin-right: 57px;
        margin-top: -292px;
    }
    header .corner4 img,header .corner5 img{
        margin-top: 65px;
    }
    header .corner1 .hidd{
        display: block;
    margin: auto;
    }
    header .corner1 .hidp{
        position: sticky!important;
    }
    header .corner1{
        margin-top: 158px;
    }
    header .next{
        margin-top: 65px;
        margin-left: -23px;
    }
    .swiper-container-vertical>.swiper-pagination-bullets{
        right: 18px!important;
        bottom: 315px;        
    }
    .tup h1{
        display: none;
    }
    .tup{
        background-size: auto;
        background-repeat: no-repeat;
    }
    .tup .card,.zer .card{
        width: 159px!important;
    float: left;
    }
    .toux,.zer{
        width: 159px;
        margin-bottom: 31px;
    }
    .zer{
        margin-bottom: 0px;
        margin-top: 11px;
    }
    .tr .no-gutters .card-img,.ds,.dd,.ty .titlex,.ty .titles{
        display: none!important;
    }
    .ty .card-title,.card-text{
        font-size: 14px;
    }
    .zer .card{
        margin: auto;
    display: contents;
    }
    .kl .card{
        width: 140px;
        float: left;
    }
    .kl .card .ab{
        height: 170px;
        width: 100%;
    }
    .kl .sss{
        width: 159px!important;
        margin: 0;
    }
    .ll{
        background-size: 100% 100%;
    }
    .ll .top{
        height: 25%!important;
    }
 }